<template>
  <div>
    <p>当前状态是:{{statusFromId(status)}}</p>
    <span v-for="(status,index) in statuses" 
    @click="choiceStatus(index)"
    :key="index">
      {{status}}
    </span>
    <input type="text" placeholder="按回车添加" @keypress.enter="add" v-model="statusValue">
    <hr>
  </div>
</template>

<script setup>
import { ref,reactive } from 'vue'
const status = ref(2)
const statusValue = ref('')
let statuses = reactive({
    0:'吃饭',
    1:'睡觉',
    2:'学习vue'
})
let statusFromId = (id) => {
  return statuses[id] || '未知状态:' + statuses[id];
}
let choiceStatus = (index) => {
  status.value = index
}
let add = (e) => {
  const len = Object.keys(statuses).length;
  statuses[len + 1] = statusValue.value
  statusValue.value = ''
}
</script>

<style scoped>
span{
  margin:5px;
  border: 1px solid rgb(54, 206, 173);
  padding:5px;
  cursor: pointer;
  transition: all 0.5s;
}
span:hover{
  background-color: darkorange;
}
</style>